<script setup lang="ts">
import { REPORT_FORM_ID, REPORT_ID } from '@/enum'

import CompanyElectricityReport from '@/components/Reports/company-electricity/index.vue'
import CompanyWeightReport1 from '@/components/Reports/company-weight/index1.vue'
import CompanyWeightReport2 from '@/components/Reports/company-weight/index2.vue'
import CompanyElectricityCategoryReport1 from '@/components/Reports/company-electricity-category/index1.vue'
import CompanyElectricityCategoryReport2 from '@/components/Reports/company-electricity-category/index2.vue'
import CompanyPrimaryElectricityDeviceReport1 from '@/components/Reports/company-primary-electricity-device/index1.vue'
import CompanyPrimaryElectricityDeviceReport2 from '@/components/Reports/company-primary-electricity-device/index2.vue'
import CompanyPrimaryElectricityDeviceReport3 from '@/components/Reports/company-primary-electricity-device/index3.vue'
import CompanyPrimaryElectricityDeviceReport4 from '@/components/Reports/company-primary-electricity-device/index4.vue'
import CompanyPrimaryElectricityDeviceReport5 from '@/components/Reports/company-primary-electricity-device/index5.vue'
import CompanyPrimaryElectricityDeviceReport6 from '@/components/Reports/company-primary-electricity-device/index6.vue'
import type { TabPaneName } from 'element-plus'

type ReportRef = InstanceType<typeof CompanyElectricityReport>
  | InstanceType<typeof CompanyWeightReport1>
  | InstanceType<typeof CompanyWeightReport2>
  | InstanceType<typeof CompanyElectricityCategoryReport1>
  | InstanceType<typeof CompanyElectricityCategoryReport2>
  | InstanceType<typeof CompanyPrimaryElectricityDeviceReport1>
  | InstanceType<typeof CompanyPrimaryElectricityDeviceReport2>
  | InstanceType<typeof CompanyPrimaryElectricityDeviceReport3>
  | InstanceType<typeof CompanyPrimaryElectricityDeviceReport4>
  | InstanceType<typeof CompanyPrimaryElectricityDeviceReport5>
  | InstanceType<typeof CompanyPrimaryElectricityDeviceReport6>

const props = defineProps<{
  month: string
  title: string
  reportId: REPORT_ID
  dataId?: number
  company: string
  socialCreditCode: string
}>()
const reportRef = ref<ReportRef>()
const isCompanyElectricity = computed(() => {
  return props.reportId === REPORT_ID.COMPANY_ELECTRICITY
})
const isCompanyWeight1 = computed(() => {
  return props.reportId === REPORT_ID.COMPANY_WEIGHT_1
})
const isCompanyWeight2 = computed(() => {
  return props.reportId === REPORT_ID.COMPANY_WEIGHT_2
})
const isCompanyElectricityCategory1 = computed(() => {
  return props.reportId === REPORT_ID.COMPANY_ELECTRICITY_CATEGORY_1
})
const isCompanyElectricityCategory2 = computed(() => {
  return props.reportId === REPORT_ID.COMPANY_ELECTRICITY_CATEGORY_2
})
const isCompanyPrimaryElectricityDevice = computed(() => {
  return props.reportId === REPORT_ID.COMPANY_PRIMARY_ELECTRICITY_DEVICE
})

const headTitle = computed(() => {
  return `${dayjs(props.month).format('YYYY年MM月')} - ${props.title}`
})

const tabsIdMap = {
  /** 主通风机 */
  [REPORT_FORM_ID.MAIN_VENTILATOR]: CompanyPrimaryElectricityDeviceReport1,
  /** 主排水 */
  [REPORT_FORM_ID.MAIN_DRAINAGE]: CompanyPrimaryElectricityDeviceReport2,
  /** 空压机 */
  [REPORT_FORM_ID.AIR_COMPRESSOR]: CompanyPrimaryElectricityDeviceReport3,
  /** 主井皮带 */
  [REPORT_FORM_ID.MAIN_SHAFT_BELT]: CompanyPrimaryElectricityDeviceReport4,
  /** 综采生产 */
  [REPORT_FORM_ID.COMBINED_MINING_PRODUCTION]: CompanyPrimaryElectricityDeviceReport5,
  /** 掘进生产 */
  [REPORT_FORM_ID.TUNNELING_PRODUCTION]: CompanyPrimaryElectricityDeviceReport6,
}
const tabId = ref<keyof typeof tabsIdMap>(REPORT_FORM_ID.MAIN_VENTILATOR)
const tabs = [
  { name: '主通风机', id: REPORT_FORM_ID.MAIN_VENTILATOR },
  { name: '主排水', id: REPORT_FORM_ID.MAIN_DRAINAGE },
  { name: '空压机', id: REPORT_FORM_ID.AIR_COMPRESSOR },
  { name: '主井皮带', id: REPORT_FORM_ID.MAIN_SHAFT_BELT },
  { name: '综采生产', id: REPORT_FORM_ID.COMBINED_MINING_PRODUCTION },
  { name: '掘进生产', id: REPORT_FORM_ID.TUNNELING_PRODUCTION },
]

function handleTabChange(name: TabPaneName) {
  const target = tabs.find(v => v.id === name)
  if (target) {
    tabId.value = target.id as keyof typeof tabsIdMap
  }
}

function getData() {
  return reportRef.value?.getSettings()
}
</script>

<template>
  <div class="flex flex-1 flex-col p-4">
    <div class="relative flex flex-shrink-0 justify-center">
      <span class="fs-24 mr-2 block">{{ headTitle }}</span>
      <slot name="action" :get-data="getData" />
    </div>
    <div v-if="isCompanyWeight1 || isCompanyWeight2" class="flex items-center justify-end">
      <span class="fs-14 text-gray">单位：吨</span>
    </div>
    <div class="flex-1 overflow-hidden" :class="{ 'mt-3': isCompanyWeight1 || isCompanyWeight2, 'mt-5': !isCompanyWeight1 && !isCompanyWeight2 }">
      <CompanyElectricityReport v-if="isCompanyElectricity" readonly :company="company" :social-credit-code="socialCreditCode" :data-id="dataId" :time="month" />
      <CompanyWeightReport1 v-else-if="isCompanyWeight1" readonly :data-id="dataId" :company="company" :social-credit-code="socialCreditCode" :time="month" />
      <CompanyWeightReport2 v-else-if="isCompanyWeight2" readonly :data-id="dataId" :company="company" :social-credit-code="socialCreditCode" :time="month" />
      <CompanyElectricityCategoryReport1 v-else-if="isCompanyElectricityCategory1" :data-id="dataId" :company="company" readonly :social-credit-code="socialCreditCode" :time="month" />
      <CompanyElectricityCategoryReport2 v-else-if="isCompanyElectricityCategory2" :data-id="dataId" :company="company" readonly :social-credit-code="socialCreditCode" :time="month" />
      <div v-else-if="isCompanyPrimaryElectricityDevice" class="h-full w-full flex">
        <div class="w-42 flex-shrink-0">
          <div class="h-full w-full flex flex-col items-end gap-4 px-3">
            <ElTabs v-model="tabId" tab-position="left" @tab-change="handleTabChange">
              <ElTabPane v-for="item in tabs" :key="item.id" :label="item.name" :name="item.id" />
            </ElTabs>
          </div>
        </div>
        <div class="flex-1 overflow-auto">
          <component :is="tabsIdMap[tabId]" readonly :data-id="dataId" :company="company" :social-credit-code="socialCreditCode" :time="month" />
        </div>
      </div>
    </div>
  </div>
</template>
